<template>
  <div>
    <el-card>
      <div>
        <span>用户名称: {{ data.nickname }}</span>
      </div>
      <div>
        <span>创建时间: {{ data.created_at }}</span>
      </div>
    </el-card>
    <el-button type="danger" @click="showConfirmation">注销用户</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getUserApi, deleteUserApi } from "@/utils/api";
import { useRouter } from "vue-router";

const router = useRouter();
const data = ref({});

const id = localStorage.getItem("id");
const getUser = () => {
  getUserApi({ id })
    .then((res) => {
      const userData = res.data.data[0];
      data.value = {
        nickname: userData.nickname,
        created_at: userData.created_at,
      };
    })
    .catch((error) => {
      console.error("Error fetching user data:", error);
    });
};

getUser();

// 点击注销用户
const showConfirmation = () => {
  const isDelete = confirm("确定要注销吗？");
  if (isDelete) {
    deleteUserApi({ id }).then((res) => {
      if (res.code === 200) {
        // 清除本地存储
        localStorage.clear();
        alert("注销成功");
        router.push("/login");
      } else {
        alert("注销失败");
      }
    });
  }
};
</script>

<style scoped>
.el-card__body {
  padding: 10px;
}

.el-card__body > div {
  margin-bottom: 10px;
}

.el-card__body > div > span {
  margin-right: 10px;
}

.el-button {
  margin-top: 10px;
}
</style>
